<script setup lang="ts">
  import { getPolicyarticleDetail } from '@/api/dataCenter';
  import { useRoute } from 'vue-router';
  const route = useRoute();
  const { query } = route;

  const article = ref();
  onMounted(() => {
    getPolicyarticleDetail({ policy_id: query.id }).then((res: any) => {
      console.log(res.data);
      article.value = res.data;
      if (article.value.policy_file) {
        article.value.policy_file = ` ${import.meta.env.VITE_API_BASE_URL}${
          article.value.policy_file
        }`;
      }
    });
  });
</script>

<template>
  <div class="article">
    <a-row>
      <a-col :span="22" v-if="article">
        <div class="titleBox boxContent">
          <div class="title">{{ article.policy_title }} </div>
          <div class="datetime" style="margin-top: 30px">
            <div>发布时间：{{ article.release_time }}</div>
            <div
              data-v-91eaed86=""
              role="separator"
              class="arco-divider arco-divider-vertical"
              ><!----></div
            >
            <div>发布部门：{{ article.policy_dept }}</div>
          </div>
          <div class="flexrow">
            <!--            <a-tag-->
            <!--              color="orangered"-->
            <!--              style="margin-top: 10px; margin-bottom: 10px"-->
            <!--            >-->
            <!--              <icon-tag-->
            <!--                style="margin-right: 3px"-->
            <!--              />申报时间：2025年06月19日-2025年06月30日</a-tag-->
            <!--            >-->
            <div class="yuanwen" style="margin-top: 10px">
              原文链接：
              <a-link target="_blank" :href="article.original_link">{{
                article.original_link
              }}</a-link>
            </div>
          </div>
        </div>
        <!--        <div class="selectBox boxContent">-->
        <!--          <div class="stitle">相关申报项目</div>-->
        <!--          <a-divider />-->
        <!--          <div class="sbaoitem">-->
        <!--            <div class="left">-->
        <!--              <div class="leftt">南充市果州优才计划</div>-->
        <!--              <div class="leftb">发布单位：南充市商务局</div>-->
        <!--            </div>-->
        <!--            <div class="right">-->
        <!--              <a-button-->
        <!--                size="small"-->
        <!--                type="primary"-->
        <!--                @click="-->
        <!--                  () => {-->
        <!--                    // $router.push({-->
        <!--                    //   path: '/ai/policy/policydateDetail',-->
        <!--                    // });-->
        <!--                  }-->
        <!--                "-->
        <!--              >-->
        <!--                我要申报-->
        <!--              </a-button>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="selectBox boxContent">
          <div class="stitle">政策原文</div>
          <a-divider />
          <div
            class="articleContenttext rich-text"
            v-html="article.policy_content"
          />
          <a-divider />
          <div class="fujian" v-if="article.policy_file">
            <div class="fujiantitle">附件：</div>
            <div class="fujianlist">
              <a-link
                class="fujianitem"
                :href="article.policy_title"
                download
                >{{
                  article.policy_file.split('/')[
                    article.policy_file.split('/').length - 1
                  ]
                }}</a-link
              >
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="less">
  .article {
    background: #f2f3f5;
    .boxContent {
      background: #ffffff;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: 2rem;
      margin-bottom: 10px;
      padding-bottom: 2rem;
      box-sizing: border-box;
    }
    .datetime {
      display: flex;
      flex-direction: row;
      color: #63656a;
      font-size: 14px;
      > div {
        &:first-child {
        }
      }
    }
    .title {
      font-weight: 700;
      font-size: 23px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .titleBox {
    }
  }
  .yuanwen {
    color: #63656a;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  .selectBox {
    .stitle {
      color: #333;
      font-weight: bold;
      font-size: 20px;
    }

    .sbaoitem {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background: #f8f9fc;
    }
    .left {
      .leftt {
        margin-bottom: 10px;
        font-size: 18px;
      }
      .leftb {
        color: #63656a;
        font-size: 14px;
      }
    }
  }
  .fujian {
    .fujiantitle {
      font-size: 18px;
    }
    .fujianlist {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .fujianitem {
        font-size: 15px;
        margin-bottom: 5px;
        &:first-child {
          margin-top: 10px;
        }
      }
    }
  }

  .rich-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    p {
      margin-bottom: 16px;
      text-align: justify;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 24px;
      margin-bottom: 16px;
      color: #333;
      font-weight: 600;
    }
    h1 {
      font-size: 24px;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
    }
    h2 {
      font-size: 20px;
    }
    h3 {
      font-size: 18px;
    }
    h4 {
      font-size: 16px;
    }
    ul,
    ol {
      margin-left: 20px;
      margin-bottom: 16px;
    }
    li {
      margin-bottom: 8px;
    }
    blockquote {
      border-left: 4px solid #165dff;
      padding: 10px 15px;
      background-color: #f5f7ff;
      margin: 16px 0;
      font-style: italic;
    }
    a {
      color: #165dff;
      text-decoration: underline;
      &:hover {
        color: #0d47a1;
      }
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 16px 0;
      display: block;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
      font-size: 14px;
    }
    th,
    td {
      border: 1px solid #eee;
      padding: 8px 12px;
      text-align: left;
    }
    th {
      background-color: #f5f7ff;
      font-weight: 600;
    }
    pre {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      overflow-x: auto;
      margin: 16px 0;
      font-family: monospace;
    }
  }
</style>
